<template>
  <div>
    <div style="position: relative;">
      <div class="clearfix" style="margin-bottom: 30px;">
        <div style="float: left; height: 28px; line-height: 28px;">
        	<span style="margin-left: 5px; margin-right: 10px; color: #ff4949;">流程标题：

        		<el-input v-model="paramsData.title" size="small"
                      :placeholder="`请输入流程标题`"
                      @input="changeTitle($event)"
                      style="width: 280px;"/>

        	</span>
          <span style="color: #409EFF;">部门：{{deptName}}</span>
          <span style="margin-left: 15px; color: #67C23A;">月份：{{salaryDate}}</span>
          <span style="margin-left: 20px; color: #222;">人数：{{pnum}}</span>

        </div>
        <div style="float: right;">
          <el-button
            type="success"
            size="mini"
            @click="goBack"
          >返回
          </el-button>
          <el-popover
            class="cyui-popover"
            placement="bottom-end"
            width="200"
            trigger="click"
            style="display: inline-block; margin: 0 10px;">
            <el-button
              slot="reference"
              type="success"
              size="mini"
              plain
            >表头
            </el-button>
            <el-checkbox
              v-model="allColumnSelected"
              :indeterminate="allColumnSelectedIndeterminate"
              @change="handleCheckedAllTableColumn"
            >
              全选
            </el-checkbox>
            <el-checkbox
              v-for="item in tableColumnList"
              :key="item.label"
              v-model="item.visible"
              @change="handleCheckedTableColumn(item)"
            >
              {{ item.label }}
            </el-checkbox>
          </el-popover>
          <el-button
            type="info"
            size="mini"
            @click="handleReelect"
            v-if="type==='1'"
          >重选
          </el-button>
          <el-button
            type="info"
            size="mini"
            @click="handleRedo"
            v-if="type==='2'"
            v-hasPermi="['hr:salaryMonth:make:add']"
          >重做
          </el-button>

          <!--v-if="type!=='3'"
              v-hasPermi="['hr:salaryMonth:make:add']"-->
          <div id="import-box" style="display: inline-block; margin: 0 10px;">
            <el-button
              id="upload-import"
              size="mini"
              type="primary"
              plain
              v-if="type!='3'"
              @click="handleImport">导入
            </el-button>
          </div>
          <el-button
            size="mini"
            type="warning"
            plain
            v-if="type!='3'"
            v-hasPermi="['hr:salaryMonth:make:add']"
            @click="handleExport">导出
          </el-button>
          <el-button
            type="primary"
            size="mini"
            @click="handleSave"
            v-if="type!=='3'"
            v-hasPermi="['hr:salaryMonth:make:add']"
          >保存
          </el-button>
          <el-button
            type="warning"
            size="mini"
            @click="handleApprove()"
            v-if="type!=='3'"
            v-hasPermi="['hr:salaryMonth:make:add']"
          >提交
          </el-button>
        </div>
      </div>
    </div>
    <template>
      <el-table
        class="list-table"
        ref="table"
        :key="tableKey"
        v-loading="listLoading"
        :data="currentListData"
        stripe
        size="small"
        fit
        highlight-current-row
        show-summary
        :summary-method="handleSummaries"
        :default-expand-all="isExpand"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        @selection-change="handleSelectionChange"
        style="width: 100%;">
        <!--<el-table-column type="selection" align="center" width="55"/>-->
        <!-- <el-table-column fixed="left" v-if="columnsVisible('salaryDate')" :show-overflow-tooltip="true"
                         prop="salaryDate"
                         label="工资年月">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">工资年月</p>
          </template>
          <template slot-scope="scope">
            <span>{{salaryDate | formatDate('yyyy-MM') }}</span>
          </template>
        </el-table-column> -->
        <el-table-column fixed="left" :show-overflow-tooltip="true" prop="employeeName">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">姓名</p>
          </template>
        </el-table-column>

        <el-table-column v-if="columnsVisible('certNo')" :show-overflow-tooltip="true" prop="certNo" label="身份证号"
                         width="150">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">身份证号</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.certNo }}</span>
          </template>
        </el-table-column>
        
        <!-- <el-table-column v-if="columnsVisible('phone')" :show-overflow-tooltip="true" prop="phone" label="电话号码"
                         width="100">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">电话号码</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.phone }}</span>
          </template>
        </el-table-column> -->
        <el-table-column v-if="columnsVisible('deptName')" :show-overflow-tooltip="true" prop="deptName" width="150"
                         label="部门名称">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">部门名称</p>
          </template>
        </el-table-column>
        <el-table-column v-if="columnsVisible('status')" :show-overflow-tooltip="true" prop="status" label="员工状态">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">员工状态</p>
          </template>
          <template slot-scope="scope">
            <el-tag :type="scope.row.employeeStatus | employeeStatus" size="small">{{scope.row.employeeStatus |
              employeeStatus('text')}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column v-if="columnsVisible('postName')" :show-overflow-tooltip="true" prop="postName" label="岗位/职务">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">岗位/职务</p>
          </template>
        </el-table-column>
        <el-table-column v-if="columnsVisible('onboardingDate')" :show-overflow-tooltip="true" prop="onboardingDate"
                         label="入职日期" width="100">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">入职日期</p>
          </template>
          <template slot-scope="scope">
            <span>{{scope.row.onboardingDate | formatDate('yyyy-MM-dd') | formatDefaultDate}}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="columnsVisible('leaveDate')" :show-overflow-tooltip="true" prop="leaveDate" label="离职日期"
                         width="100">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">离职日期</p>
          </template>
          <template slot-scope="scope">
            <span>
              {{scope.row.leaveDate | formatDate('yyyy-MM-dd') | formatDefaultDate}}
            </span>
          </template>
        </el-table-column>
        <el-table-column v-if="columnsVisible('baseSalary')" :show-overflow-tooltip="true" prop="baseSalary"
                         label="基本工资" width="150">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">基本工资(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input v-model="scope.row.baseSalary" class="edit-input" size="small"
                        :placeholder="`最大${scope.row.salaryBase}`"
                        @blur="handleChangeInputValue(scope, 'baseSalary')"
                        style="width: 130px;"/>
            </template>
            <span v-else>{{ scope.row.baseSalary }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="columnsVisible('assessmentSalary')" :show-overflow-tooltip="true" prop="assessmentSalary"
                         label="绩效奖金" width="150">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">绩效奖金(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input v-model="scope.row.assessmentSalary" class="edit-input" size="small"
                        :placeholder="`最大${scope.row.salaryAssessment}`"
                        @blur="handleChangeInputValue(scope, 'assessmentSalary')" style="width: 130px;"/>
            </template>
            <span v-else>{{ scope.row.assessmentSalary }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="columnsVisible('postSalary')" :show-overflow-tooltip="true" prop="postSalary"
                         label="岗位工资" width="150">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">岗位工资(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input v-model="scope.row.postSalary" class="edit-input" size="small"
                        :placeholder="`最大${scope.row.salaryPost}`"
                        @blur="handleChangeInputValue(scope, 'postSalary')" style="width: 130px;"/>
            </template>
            <span v-else>{{ scope.row.postSalary }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="columnsVisible('marketingSalary')" :show-overflow-tooltip="true" prop="marketingSalary"
                         label="营销奖金(行方)" width="170">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">营销奖金(行方)(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input v-model="scope.row.marketingSalary" class="edit-input" size="small"
                        @blur="handleChangeInputValue(scope, 'marketingSalary')" style="width: 130px;"/>
            </template>
            <span v-else>{{ scope.row.marketingSalary }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="columnsVisible('subsidySalary')" :show-overflow-tooltip="true" prop="subsidySalary"
                         label="补贴工资" width="150">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">补贴工资(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input v-model="scope.row.subsidySalary" class="edit-input" size="small"
                        @blur="handleChangeInputValue(scope, 'subsidySalary')" style="width: 130px;"/>
            </template>
            <span v-else>{{ scope.row.subsidySalary }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="columnsVisible('overtimeSalary')" :show-overflow-tooltip="true" prop="overtimeSalary"
                         label="加班工资" width="150">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">加班工资(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input v-model="scope.row.overtimeSalary" class="edit-input" size="small"
                        @blur="handleChangeInputValue(scope, 'overtimeSalary')" style="width: 130px;"/>
            </template>
            <span v-else>{{ scope.row.overtimeSalary }}</span>
          </template>
        </el-table-column>
        <!--<el-table-column v-if="columnsVisible('reissueSalary')" :show-overflow-tooltip="true" prop="reissueSalary" label="补发项" width="150">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">补发项(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input v-model="scope.row.reissueSalary" class="edit-input" size="small"
                        @blur="handleChangeInputValue(scope, 'reissueSalary')" style="width: 130px;"/>
            </template>
            <span v-else>{{ scope.row.reissueSalary }}</span>
          </template>
        </el-table-column>-->
        <el-table-column v-if="columnsVisible('attendanceDeduction')" :show-overflow-tooltip="true"
                         prop="attendanceDeduction" label="考勤扣款" width="150">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">考勤扣款(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input v-model="scope.row.attendanceDeduction" class="edit-input" size="small"
                        @blur="handleChangeInputValue(scope, 'attendanceDeduction')" style="width: 130px;"/>
            </template>
            <span v-else>{{ scope.row.attendanceDeduction }}</span>
          </template>
        </el-table-column>
        <!--<el-table-column v-if="columnsVisible('businessDays')" :show-overflow-tooltip="true" prop="businessDays" label="出差天数" width="150">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">出差天数</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input v-model="scope.row.businessDays" class="edit-input" size="small"
                        @blur="handleChangeInputValue(scope, 'businessDays')"
                        style="width: 130px;"/>
            </template>
            <span v-else>{{ scope.row.businessDays }}</span>
          </template>
        </el-table-column>-->
        <el-table-column v-if="columnsVisible('allowanceSalary')" :show-overflow-tooltip="true" prop="allowanceSalary"
                         label="津贴" width="150">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">津贴(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input v-model="scope.row.allowanceSalary" class="edit-input" size="small"
                        :placeholder="`最大${scope.row.salaryAllowance}`"
                        @blur="handleChangeInputValue(scope, 'salaryAllowance')" style="width: 130px;"/>
            </template>
            <span v-else>{{ scope.row.allowanceSalary }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="columnsVisible('teacherMealSalary')" :show-overflow-tooltip="true"
                         prop="teacherMealSalary" label="讲师餐补" width="150">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">讲师餐补(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input v-model="scope.row.teacherMealSalary" class="edit-input" size="small"
                        @blur="handleChangeInputValue(scope, 'teacherMealSalary')" style="width: 130px;"/>
            </template>
            <span v-else>{{ scope.row.teacherMealSalary }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="columnsVisible('labourServiceSalary')" :show-overflow-tooltip="true"
                         prop="labourServiceSalary" label="劳务工资" width="150">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">劳务工资(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input v-model="scope.row.labourServiceSalary" class="edit-input" size="small"
                        @blur="handleChangeInputValue(scope, 'labourServiceSalary')" style="width: 130px;"/>
            </template>
            <span v-else>{{ scope.row.labourServiceSalary }}</span>
          </template>
        </el-table-column>
        <!--<el-table-column v-if="columnsVisible('personnelManagementDept')" :show-overflow-tooltip="true" prop="personnelManagementDept" label="人事管理部" width="150">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">人事管理部(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input v-model="scope.row.personnelManagementDept" class="edit-input" size="small"
                        @blur="handleChangeInputValue(scope, 'personnelManagementDept')" style="width: 130px;"/>
            </template>
            <span v-else>{{ scope.row.personnelManagementDept }}</span>
          </template>
        </el-table-column>-->
        <!--<el-table-column v-if="columnsVisible('marketInnovationDept')" :show-overflow-tooltip="true" prop="marketInnovationDept" label="市场创新部" width="150">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">市场创新部(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input v-model="scope.row.marketInnovationDept" class="edit-input" size="small"
                        @blur="handleChangeInputValue(scope, 'marketInnovationDept')" style="width: 130px;"/>
            </template>
            <span v-else>{{ scope.row.marketInnovationDept }}</span>
          </template>
        </el-table-column>-->
        <!--<el-table-column v-if="columnsVisible('officialWebsite')" :show-overflow-tooltip="true" prop="officialWebsite" label="官网" width="150">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">官网(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input v-model="scope.row.officialWebsite" class="edit-input" size="small"
                        @blur="handleChangeInputValue(scope, 'officialWebsite')" style="width: 130px;"/>
            </template>
            <span v-else>{{ scope.row.officialWebsite }}</span>
          </template>
        </el-table-column>-->
        <!--<el-table-column v-if="columnsVisible('substituteDeduction')" :show-overflow-tooltip="true" prop="substituteDeduction" label="代发代付" width="150">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">代发代付(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input v-model="scope.row.substituteDeduction" class="edit-input" size="small"
                        @blur="handleChangeInputValue(scope, 'substituteDeduction')" style="width: 130px;"/>
            </template>
            <span v-else>{{ scope.row.substituteDeduction }}</span>
          </template>
        </el-table-column>-->
        <el-table-column v-if="columnsVisible('otherDeduction')" :show-overflow-tooltip="true" prop="otherDeduction"
                         label="其他扣款" width="150">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">其他扣款(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input v-model="scope.row.otherDeduction" class="edit-input" size="small"
                        @blur="handleChangeInputValue(scope, 'otherDeduction')" style="width: 130px;"/>
            </template>
            <span v-else>{{ scope.row.otherDeduction }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="columnsVisible('personalSocialSecurityTotalCost')" :show-overflow-tooltip="true"
                         prop="personalSocialSecurityTotalCost" label="个人社保总扣除" width="170">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">个人社保总扣除(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input v-model="scope.row.personalSocialSecurityTotalCost" class="edit-input" size="small"
                        :disabled="true"
                        @blur="handleChangeInputValue(scope, 'personalSocialSecurityTotalCost')"
                        style="width: 130px;"/>
            </template>
            <span v-else>{{ scope.row.personalSocialSecurityTotalCost }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="columnsVisible('personalSocialSecurityAdjust')" :show-overflow-tooltip="true"
                         prop="personalSocialSecurityAdjust" label="个人社保总扣除调整" width="170">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">个人社保总扣除调整(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input v-model="scope.row.personalSocialSecurityAdjust" class="edit-input" size="small"
                        @blur="handleChangeInputValue(scope, 'personalSocialSecurityAdjust')"
                        style="width: 130px;"/>
            </template>
            <span v-else>{{ scope.row.personalSocialSecurityAdjust }}</span>
          </template>
        </el-table-column>
        <!--<el-table-column v-if="columnsVisible('personalSocialSecurityAdjust')" :show-overflow-tooltip="true"
                         prop="personalSocialSecurityAdjust" label="个人社保总扣除调整" width="170">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">其他社保扣除(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input v-model="scope.row.personalSocialSecurityAdjust" class="edit-input" size="small"
                        @blur="handleChangeInputValue(scope, 'personalSocialSecurityAdjust')"
                        style="width: 130px;"/>
            </template>
            <span v-else>{{ scope.row.personalSocialSecurityAdjust }}</span>
          </template>
        </el-table-column>-->
        <el-table-column v-if="columnsVisible('enterpriseSocialSecurityTotalCost')" :show-overflow-tooltip="true"
                         prop="enterpriseSocialSecurityTotalCost" label="企业社保总扣除" width="170">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">企业社保总扣除(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input v-model="scope.row.enterpriseSocialSecurityTotalCost" class="edit-input" size="small"
                        :disabled="true"
                        @blur="handleChangeInputValue(scope, 'enterpriseSocialSecurityTotalCost')"
                        style="width: 130px;"/>
            </template>
            <span v-else>{{ scope.row.enterpriseSocialSecurityTotalCost }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="columnsVisible('securityCharge')" :show-overflow-tooltip="true" prop="securityCharge"
                         label="服务费" width="150">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">服务费(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input v-model="scope.row.securityCharge" class="edit-input" size="small"
                        :disabled="true"
                        @blur="handleChangeInputValue(scope, 'securityCharge')" style="width: 130px;"/>
            </template>
            <span v-else>{{ scope.row.securityCharge }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="columnsVisible('beforeTaxSalary')" :show-overflow-tooltip="true" prop="beforeTaxSalary"
                         label="税前工资" width="150">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">税前工资(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input v-model="scope.row.beforeTaxSalary" class="edit-input" size="small"
                        :disabled="true"
                        @blur="handleChangeInputValue(scope, 'beforeTaxSalary')" style="width: 130px;"/>
            </template>
            <span v-else>{{ scope.row.beforeTaxSalary }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="columnsVisible('personalIncomeTax')" :show-overflow-tooltip="true"
                         prop="personalIncomeTax" label="个税" width="150">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">个税(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input v-model="scope.row.personalIncomeTax" class="edit-input" size="small"
                        :disabled="true"
                        @blur="handleChangeInputValue(scope, 'personalIncomeTax')" style="width: 130px;"/>
            </template>
            <span v-else>{{ scope.row.personalIncomeTax }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="columnsVisible('labourServiceTax')" :show-overflow-tooltip="true" prop="labourServiceTax"
                         label="劳务税" width="150">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">劳务税(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input v-model="scope.row.labourServiceTax" class="edit-input" size="small"
                        :disabled="true"
                        @blur="handleChangeInputValue(scope, 'labourServiceTax')" style="width: 130px;"/>
            </template>
            <span v-else>{{ scope.row.labourServiceTax }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="columnsVisible('realSalary')" :show-overflow-tooltip="true" prop="realSalary"
                         label="实发工资" width="150">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">实发工资(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input v-model="scope.row.realSalary" class="edit-input" size="small"
                        :disabled="true"
                        @blur="handleChangeInputValue(scope, 'realSalary')"
                        style="width: 130px;"/>
            </template>
            <span v-else>{{ scope.row.realSalary }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="columnsVisible('remark')" :show-overflow-tooltip="true" prop="remark" label="备注"
                         width="150">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">备注</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input v-model="scope.row.remark" class="edit-input" size="small"
                        @blur="handleChangeInputValue(scope, 'remark')"
                        style="width: 130px;"/>
            </template>
            <span v-else>{{ scope.row.remark }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column v-if="columnsVisible('bankNo')" :show-overflow-tooltip="true" prop="bankNo" label="银行卡号"
                         width="150">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">银行卡号</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.bankNo }}</span>
          </template>
        </el-table-column> -->
        <!-- <el-table-column v-if="columnsVisible('openingBank')" :show-overflow-tooltip="true" prop="openingBank"
                         label="开户行" width="150">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">开户行</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.openingBank }}</span>
          </template>
        </el-table-column> -->
        
        <el-table-column fixed="right" :show-overflow-tooltip="true" prop="payableSalary" width="150">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">应发工资(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input v-model="scope.row.payableSalary" class="edit-input" size="small"
                        :disabled="true"
                        @blur="handleChangeInputValue(scope, 'payableSalary')" style="width: 130px;"/>
            </template>
            <span v-else>{{ scope.row.payableSalary }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="type != 3" ref="actionColumn" fixed="right" align="left" label="操作" :width="actionWidth"
                         class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button type="danger"
                       
                       size="mini"
                       icon="el-icon-delete"
                       @click="handleDelete(scope.row)"
                       v-hasPermi="['hr:salaryMonth:make:add']"></el-button>
            <slot name="rights" :row-data="scope.row"></slot>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="searchKey.pageNum" :page-sizes="[10, 15, 20]"
                     :page-size="searchKey.pageSize"
                     layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import { debounce } from 'lodash'
  import { create, all } from 'mathjs'
  import numeral from 'numeral'
  import commonMixins from '@/mixins/common'
  import salaryMixins from '@/mixins/salary'
  import filters from '@/filters/filters'
  import tagFilter from '@/filters/tagFilter'
  import salaryImportExcel from '@/mixins/salaryImportExcel'

  let math = create(all, {
    number: 'BigNumber',
    precision: 64
  })

  export default {
    name: 'SalarymakeTable',
    mixins: [commonMixins, salaryMixins, filters, tagFilter, salaryImportExcel],
    components: {},
    data() {
      return {
       
        title: this.paramsData.title,
        searchKey: {},
        isExpand: true,
        tableSelectedData: [], // 选中的表数据
        listData: [] // 列表数据
      }
    },
    props: {
      data: { // 列表数据
        type: Array,
        required: true,
        default() {
          return []
        }
      },
      searchParams: { // 搜索参数
        type: Object,
        required: true,
        default() {
          return {}
        }
      },
      totalCount: {
        type: [String, Number],
        required: true,
        default: 0
      },
      pnum: {
        type: [Number],
        required: true,
        default: 0
      },
      listLoading: {
        type: [Boolean],
        required: true,
        default: false
      },
      type: {
        type: [String],
        required: true,
        default: '1'
      },
      deptName: {
        type: [String],
        default: '-'
      },
      salaryDate: {
        type: [String],
        default: '-'
      },

      paramsData: {
        type: Object,
        required: true,
        default() {
          return {}
        }
      }
    },
    computed: {
      currentListData() { // 当前的数据列表
        let { listData, totalCount } = this
       
        let { pageNum, pageSize } = this.searchKey
        let totalPage = 0 //总页数
        if ((totalCount / pageSize) > parseInt(totalCount / pageSize)) {
          totalPage = parseInt(totalCount / pageSize) + 1
        } else {
          totalPage = parseInt(totalCount / pageSize)
        }
        //对数据进行分页
        let startRow = (pageNum - 1) * pageSize
        let endRow = (pageNum * pageSize > totalCount ? totalCount : pageNum * pageSize) - 1
        return listData.filter((item, index) => {
          return startRow <= index && index <= endRow
        })
      },
      actionWidth() {
        let { permissionValue, baseWidth } = {
          baseWidth: 0,
          permissionValue: ['hr:salaryMonth:make:add']
        }
        let width = baseWidth
        let all_permission = '*:*:*'
        let permissions = this.$store.getters.permissions
        if (permissionValue.length > 0) {
          let isAllPermission = permissions.some(permission => { // 是否全部权限
            return all_permission === permission
          })
          let existingPermissions = permissions.filter(permission => { // 存在的权限
            return permissionValue.includes(permission)
          })
          if (isAllPermission) {
            width += permissionValue.length * 60
          } else {
            width += existingPermissions.length * 60
          }
        }
        return width
      }
    },
    methods: {
      goBack() {

        let name = 'Salary'

        if (this.$route.query.task) {
          name = 'Task'
        }
        this.$store.dispatch("tagsView/delView", this.$route);
        this.$router.replace({
          name: name
        })
      },
      computedPayableSalary(row) { // 计算应发工资
        // 基本工资 + 绩效奖金 + 岗位工资 + 营销奖金（行方）+ 补贴工资 + 加班工资 - 考勤扣款 + 津贴 + 讲师餐补 + 劳务工资 - 其他扣款
        let { baseSalary, assessmentSalary, postSalary, marketingSalary, subsidySalary, overtimeSalary, attendanceDeduction, allowanceSalary, teacherMealSalary, labourServiceSalary, otherDeduction } = row
        baseSalary = baseSalary || 0
        assessmentSalary = assessmentSalary || 0
        postSalary = postSalary || 0
        marketingSalary = marketingSalary || 0
        subsidySalary = subsidySalary || 0
        overtimeSalary = overtimeSalary || 0
        attendanceDeduction = attendanceDeduction || 0
        allowanceSalary = allowanceSalary || 0
        teacherMealSalary = teacherMealSalary || 0
        labourServiceSalary = labourServiceSalary || 0
        otherDeduction = otherDeduction || 0

        let formula = `${baseSalary} + ${assessmentSalary} + ${postSalary} + ${marketingSalary} + ${subsidySalary} + ${overtimeSalary} - ${attendanceDeduction} + ${allowanceSalary} + ${teacherMealSalary} + ${labourServiceSalary} - ${otherDeduction}`
        return this.formatNumber({ formula })
      },
      computedBeforeTaxSalary(row, payableSalary) { // 计算税前工资
        let { personalSocialSecurityTotalCost, personalSocialSecurityAdjust } = row
        personalSocialSecurityTotalCost = personalSocialSecurityTotalCost || 0
        personalSocialSecurityAdjust = personalSocialSecurityAdjust || 0

        let formula = `${payableSalary} - ${personalSocialSecurityTotalCost} - ${personalSocialSecurityAdjust}`
        return this.formatNumber({ formula })
      },
      /**
       * 计算个人所得税
       * @param beforeTaxSalary 税前工资 - 劳务工资 - 5000
       * @returns {number}
       */
      computedPersonalIncomeTax(row, beforeTaxSalary) {
        let { labourServiceSalary } = row
        labourServiceSalary = labourServiceSalary || 0
        let cTax = math.evaluate(`${beforeTaxSalary} - ${labourServiceSalary} - 5000`)
        cTax = cTax < 0 ? 0 : cTax
        if (cTax <= 3000) {
          cTax = `${cTax} * 0.03`
        } else if (cTax > 3000 && cTax <= 12000) {
          cTax = `${cTax} * 0.10 - 210`
        } else if (cTax > 12000 && cTax <= 25000) {
          cTax = `${cTax} * 0.20 - 1410`
        } else if (cTax > 25000 && cTax <= 35000) {
          cTax = `${cTax} * 0.25 - 2660`
        } else if (cTax > 35000 && cTax <= 55000) {
          cTax = `${cTax} * 0.30 - 4410`
        } else if (cTax > 55000 && cTax <= 80000) {
          cTax = `${cTax} * 0.35 - 7160`
        } else {
          cTax = `${cTax} * 0.45 - 15160`
        }
        return this.formatNumber({ formula: cTax })
      },
      /**
       * 劳务报酬所得，每次收入不超过四千元的，减除费用八百元；四千元以上的，减除百分之二十的费用，其余
       * 额为应纳税所得额。然后适用比例税率，税率为百分之二十。
       *
       * |收入(x)         |应纳税部分(y)     |   阶梯         |税率        | 纳税额           | 速扣系数     |
       * -----------------------------------------------------------------------------------------------
       * |x<=800         |      0       |     0             |  0        | 0               | 0           |
       * |800<x<=4000    |    x-800     |    y<=20000       |  20%      | (x-800)*20%     | 0           |
       * |4000<x<=20000  |    0.8x      |    y<=20000       |  20%      | 0.8x*20%        | 0           |
       * |20000<x<=50000 |    0.8x      |    20000<y<=50000 |  30%      | 0.8x*30%        | 2000        |
       * |x>50000        |    0.8x      |    y>50000        |  40%      | 0.8x*40%        | 7000        |
       *
       * @param originIncome
       * @returns {number}
       */
      computedIncomeAfterTax(originIncome) {
        //应纳税部分
        let taxIncome = 0 // 应纳税部分
        let taxRate = 0 // 税率
        let quickDeducData = 0 // 速扣系数
        if (originIncome <= 800) {
          return originIncome
        } else if (originIncome > 800 && originIncome <= 4000) {
          taxIncome = math.evaluate(`${originIncome} - 800`)
          taxRate = 0.2
        }
        if (originIncome > 4000) {
          taxIncome = math.evaluate(`${originIncome} * 0.8`)
        }
        if (taxIncome <= 20000) {
          taxRate = 0.2
        } else if (taxIncome > 20000 && taxIncome <= 50000) {
          taxRate = 0.3
          quickDeducData = 2000
        }
        if (taxIncome > 50000) {
          taxRate = 0.4
          quickDeducData = 7000
        }
        let incomeAfterTax = `${originIncome} - (${taxIncome} * ${taxRate} - ${quickDeducData})`
        return this.formatNumber({ formula: incomeAfterTax })
      },
      /**
       * 计算劳务税 = 劳务工资 - 劳务税后工资
       * @param originIncome
       * @returns {number}
       */
      computedLabourServiceTax(row) {
        let { labourServiceSalary } = row
        let incomeAfterTax = this.computedIncomeAfterTax(labourServiceSalary)
        let labourServiceTax = `${labourServiceSalary} - ${incomeAfterTax}`
        return this.formatNumber({ formula: labourServiceTax })
      },
      /**
       * 实发工资 = 税前工资 - 个税 - 劳务税
       * @param beforeTaxSalary
       * @param personalIncomeTax
       * @param labourServiceTax
       * @returns {*}
       */
      computedRealSalary(beforeTaxSalary, personalIncomeTax, labourServiceTax) {
        let formula = `${beforeTaxSalary} - ${personalIncomeTax} - ${labourServiceTax}`
        return this.formatNumber({ formula })
      },
      handleSizeChange(val) { // 分页改变每页条数
        this.searchKey.pageSize = val
        // this.$emit('on-init', this.searchKey)
      },
      handleCurrentChange(val) { // 分页切换分页
        this.searchKey.pageNum = val
        // this.$emit('on-init', this.searchKey)
      },
      handleSelectionChange(selection) { // 多选框选中数据
        this.tableSelectedData = selection
      },
      handleExpand: debounce(function() { // 查询，防抖
        this.isExpand = !this.isExpand
        this.$emit('on-init', this.searchKey)
      }, 300),
      handleReelect() { // 重选选择
        this.$emit('on-reelect')
      },
      handleRedo() { // 重做
        this.$emit('on-redo')
      },
      handleSave: debounce(function() { // 保存，防抖
        this.$emit('on-save', this.listData)
      }, 300),
      handleApprove() { // 是否审批
        this.$emit('on-approve', this.listData)
      },
      handleExport: debounce(function() { // 导出，防抖
        this.$emit('on-export')
      }, 300),

      handleImport() { // 导入
        /*let { type } = this
        if (type === '1') {
          this.$notify.error({
            title: '错误',
            message: '请先保存数据！'
          })
        }*/

        /*this.$confirm('是否确认导入数据?注意：导入后列表已有数据将被清空！！', '警告', {
             confirmButtonText: '确定',
             cancelButtonText: '取消',
             type: 'warning'
           }).then(async() => {*/

        this.$emit('on-import')

        /*}).catch(() => {
        })*/

        //salaryImportExcel()

      },
      handleChangeInputValue(data, key) {
        let isCurrency = /^(([1-9]\d*)|0)(\.\d{1,2})?$/
        let { pageNum, pageSize } = this.searchKey
        let { row } = data
        if (key !== 'remark' && !isCurrency.test(row[key])) {
          let value = numeral(row[key])
          // let value = parseFloat(row[key]) || 0
          row[key] = value.format('0.00')
        }
        let listDataIndex = (pageNum - 1) * pageSize + data.$index
        /* Object.keys(row).forEach((item, index) => {
          this.$set(this.listData[listDataIndex], item, row[item])
        }) */
        let payableSalary = this.computedPayableSalary(row)
        let beforeTaxSalary = this.computedBeforeTaxSalary(row, payableSalary)
        let personalIncomeTax = this.computedPersonalIncomeTax(row, beforeTaxSalary) // 个税
        let labourServiceTax = this.computedLabourServiceTax(row) // 劳务税
        let realSalary = this.computedRealSalary(beforeTaxSalary, personalIncomeTax, labourServiceTax) // 实发工资
        this.$set(this.listData[listDataIndex], key, row[key])
        this.$set(this.listData[listDataIndex], 'payableSalary', payableSalary)
        this.$set(this.listData[listDataIndex], 'beforeTaxSalary', beforeTaxSalary)
        this.$set(this.listData[listDataIndex], 'personalIncomeTax', personalIncomeTax)
        this.$set(this.listData[listDataIndex], 'labourServiceTax', labourServiceTax)
        this.$set(this.listData[listDataIndex], 'realSalary', realSalary)
      },
      changeTitle(e) {
        //console.log(e)
        this.$forceUpdate() //我也不明白为什么，就是无法输入，只能这样了
      },
      handleDelete(data = null) { // 删除
        let { tableSelectedData } = this
        // this.pnum --;
        // if(this.pnum < 0){
        //   this.pnum = 0;
        // }
        this.$emit('on-delete', data || tableSelectedData[0])
      }
    },
    watch: {
      data: {
        handler: function(newVal, oldVal) {
          if (JSON.stringify(newVal) !== JSON.stringify(this.listData)) {
            this.listData = JSON.parse(JSON.stringify(newVal))
          }
        },
        deep: true,
        immediate: true
      },
      searchParams: {
        handler: function(newVal, oldVal) {
          if (JSON.stringify(newVal) !== JSON.stringify(this.searchKey)) {
            this.searchKey = JSON.parse(JSON.stringify(newVal))
          }
        },
        deep: true,
        immediate: true
      },

      paramsData: {

        handler: function(newVal, oldVal) {

          if (JSON.stringify(newVal) !== JSON.stringify(this.paramsData)) {
            this.paramsData = JSON.parse(JSON.stringify(newVal))
          }
        },
        deep: true,
        immediate: true
      }
    },
    created() {

    },
    mounted() {
      this.getTableColumns()
    }
  }
</script>

<style lang="scss" scoped>
  .list-table {
    .el-button--mini {
      padding: 7px 15px;
      width: 45px;
      color: #fff;
    }

    & /deep/ .el-table__header-wrapper {
      th {
        background-color: #fff;
      }
    }
  }
</style>

<style lang="scss">
  .el-popover {
    max-height: 400px;
    overflow-x: auto;
    overflow-y: scroll;
  }
</style>
